<template>
  <view class="container" :style="{ paddingTop: statusBarHeight + 'px' }">
    <uni-nav-bar title="待提交点采单" fixed :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"
      @clickRight="delAllOrderGoods" rightText="清空"></uni-nav-bar>
    <view class="topCard">
      <view class="balance">预充值余额：{{ balance }}元</view>
      <view class="sum">当前采购总价：{{ totalMoney }}元</view>
    </view>
    <scroll-view style="height: calc(100% - var(--window-top) - 168rpx);box-sizing: border-box;"
      :style="{ paddingBottom: `calc(${safeAreaBottom}px + 80rpx	)` }" scroll-y enhanced :show-scrollbar="false"
      @scrolltolower="scrolltolower" :scroll-with-animation="true" refresher-enabled @refresherrefresh="pulldownRefresh"
      :refresher-triggered="triggered" @touchmove.stop>
      <view class="list" v-if="ordergoodsList.length > 0">
        <view class="item" v-for="(item, index) in ordergoodsList" :key="item.id + index">
          <view class="top">
            <view class="title u-ellipsis">{{ item.name }}</view>

          </view>
          <view class="bottom">
            <view class="pic">
              <image :src="item.imgUrl ? item.imgUrl : '/static/index/noneImg.png'" mode="aspectFill"></image>
            </view>
            <view class="info">
              <view class="sub_title">配送规格：{{ item.deliveryNorms }}KG</view>
              <view class="sub_title">点采价：{{ item.outboundPrice }}元</view>
              <view class="sub_title">总量：{{ item.totalKG }}KG</view>
              <view class="sub_title">合计：{{ item.sumMoney }}元</view>
              <view class="sub_title">规格数量：<uni-number-box v-model="item.deliveryCount" :min="1" :max="10000" /></view>
              <view class="sub_title" @click="delOrderGoods(item.id)"><uni-icons type="trash" size="30"
                  color="#f54343"></uni-icons></view>
            </view>
          </view>
        </view>
      </view>
      <view
        style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
        v-if="ordergoodsList.length == 0">
        <image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
      </view>
    </scroll-view>
    <view class="bottomFix" @click="submitOrder" :style="{ paddingBottom: safeAreaBottom + 'px' }">
      <text class="btnBox">确 认 提 交</text>
    </view>
  </view>
</template>

<script>
import { DecimalUtils } from "@/utils/math.js";
import { reqUnSubmitPointPurchase, reqDeleteUnSubmitPointPurchase, reqCreateNonstandardOrder, reqDeleteAllUnSubmitPointPurchase } from '@/apis/member'
export default {
  name: "NoWaitSubmit",
  data() {
    return {
      balance: 0,
      ordergoodsList: [],
      triggered: false,
      oldordergoodsList: [],
      totalMoney: 0
      // loading: 'loading'
    }
  },
  watch: {
    ordergoodsList: {
      handler(val) {
        this.totalMoney = 0
        val.forEach(item => {
          item.totalKG = DecimalUtils.multiply(item.deliveryNorms, item.deliveryCount)
          item.sumMoney = DecimalUtils.multiply(item.totalKG, item.outboundPrice)
          this.totalMoney = DecimalUtils.add(this.totalMoney, item.sumMoney)
        })
        this.totalMoney = Math.round(this.totalMoney * Math.pow(10, 2)) / Math.pow(10, 2)
        console.log('res.data.ordergoodsList', this.ordergoodsList, this.totalMoney);
      },
      deep: true
    }
  },
  onShow() {
    this.reqUnSubmitPointPurchase()
  },
  methods: {
    async reqUnSubmitPointPurchase() {
      const res = await reqUnSubmitPointPurchase()
      if (res.code === 200) {
        // uni.navigateBack()
        this.balance = res.data.balance
        this.triggered = false
        this.ordergoodsList = res.data.detailsList.map(item => {
          item.totalKG = DecimalUtils.multiply(item.deliveryNorms, item.deliveryCount)

          item.sumMoney = DecimalUtils.multiply(item.totalKG, item.outboundPrice)
          // console.log('item.sumMoney', item.sumMoney, '00000');
          this.totalMoney = DecimalUtils.add(item.sumMoney, this.totalMoney)
          console.log('this.totalMoney1', this.totalMoney);
          return item
        })
        console.log('this.totalMoney2', this.totalMoney);
        this.totalMoney = this.totalMoney
        this.ordergoodsList.forEach(item => {
          this.oldordergoodsList.forEach(item2 => {
            if (item.id == item2.id) {
              item.totalKG = item2.totalKG
              item.sumMoney = item2.sumMoney
              item.deliveryCount = item2.deliveryCount
            }
          })
        })
        console.log('res.data.ordergoodsList3', this.ordergoodsList, this.totalMoney);
      }
    },
    refreshStatus() {

    },
    scrolltolower() {

    },
    pulldownRefresh() {
      this.triggered = true
      this.reqUnSubmitPointPurchase()
    },
    delOrderGoods(id) {
      this.oldordergoodsList = this.ordergoodsList.map(item => item)
      console.log('111');
      uni.showModal({
        content: '是否删除该商品?',
        success: async (res) => {
          if (res.confirm) {
            let res = await reqDeleteUnSubmitPointPurchase({ id });
            if (res.code === 200) {
              this.reqUnSubmitPointPurchase();
              uni.utils.toast('删除成功', 'success');

            }
          } else if (res.cancel) {
            console.log('取消');
            //TODO
          }
        }
      })
    },
    async submitOrder() {
      if (this.ordergoodsList.length === 0) {
        uni.utils.toast('请先添加商品');
        return
      }
      const detailsList = this.ordergoodsList.map(item => {
        return {
          id: item.id,
          buyCount: item.totalKG,
          deliveryCount: item.deliveryCount,
        }
      })
      console.log('detailsList', detailsList);
      const res = await reqCreateNonstandardOrder({
        detailsList,
        totalMoney: this.totalMoney
      })
      if (res.code === 200) {
        uni.utils.toast('提交成功', 'success');
        this.reqUnSubmitPointPurchase();
      }
    },
    delAllOrderGoods() {
      if (this.ordergoodsList.length === 0) {
        uni.utils.toast('暂无可删除的商品');
        return
      }
      const idList = this.ordergoodsList.map(item => item.id)
      uni.showModal({
        content: '确认清空所有商品吗?',
        success: async (res) => {
          if (res.confirm) {
            let res = await reqDeleteAllUnSubmitPointPurchase({ idList });
            if (res.code === 200) {
              uni.utils.toast('删除成功', 'success');
              this.reqUnSubmitPointPurchase();
            }
          } else if (res.cancel) {
            console.log('取消');
            //TODO
          }
        }
      })
    }
  }
}
</script>

<style>
page {
  background: #f7f7f7;

}
</style>
<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.container {
  height: 100vh;
}

.topCard {
  font-size: 26rpx;
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  background-color: #fff;
  border: 1px solid #eee;
}

.list {
  padding: 20rpx 20rpx;
  padding-bottom: 0;

  .item {
    padding: 20rpx 24rpx;
    background-color: #fff;
    border-radius: 8rpx;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 10rpx;

      .title {
        width: 60%;
        font-size: $uni-font-size-upBase;
        color: #000;
      }

      .sub_title {
        font-size: $uni-font-size-mini;
        flex: 1;
        color: #333;
        text-align: right;
      }
    }

    .bottom {
      display: flex;

      .pic {
        width: 200rpx;
        height: 200rpx;

        image {
          width: 100%;
          height: 100%;
          background-color: #f7f7f7;
        }
      }

      .info {
        padding-left: 20rpx;
        flex: 1;
        min-width: 440rpx;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .sub_title {
          font-size: $uni-font-size-mini;
          width: 50%;
          color: #333;

          &:last-child {
            text-align: right;
            width: 20%;
          }

          &:nth-last-child(2) {
            display: flex;
            align-items: center;
            width: 80%;
          }
        }
      }
    }
  }
}

.bottomFix {
  position: fixed;
  width: 100%;
  height: 80rpx;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: $uni-font-size-base;

  .btnBox {
    width: 100%;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    background-color: $uni-main-bgColor;
    color: #fff;
  }

  .btnBox:nth-child(2) {
    background-color: #fff;
    color: #000;
  }
}
</style>